<template>
  <div class="header-class">
    <el-input v-model="inputValue" style="width: 240px" placeholder="搜索">
      <template #prefix>
        <el-icon class="el-input__icon">
          <search />
        </el-icon>
      </template>
    </el-input>
    <span class="time-class">2021/11/11</span>
    <el-icon><Message /></el-icon>
    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
  </div>

</template>
<script setup lang="ts">
import { ref } from 'vue'

const inputValue = ref('')

</script>
<style scoped>
.header-class {
  el-input{
    border-radius: 8px;
  }
  .time-class {
    position: absolute;
    right: 7%;
  }

  .el-avatar {
      position: absolute;
      right: 3%;
      margin-top: -10px;
  }
}
</style>
